<template>
  <div>
    <el-card>
      <template #header>
        <span class="title">发布作品的总 PV {{ pv }}</span>
      </template>
      <el-row>
        <v-chart style="height: 500px" :option="lineOption" :theme="isDark ? 'dark' : ''" autoresize />
      </el-row>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { getPV } from '@/service/stat'
import { useGlobalStore } from '@/stores/global'
import { formatDay } from '@/utils/date'

const global = useGlobalStore()
const isDark = computed(() => global.isDark)
const pv = ref(0)
const lineOption = ref()

onMounted(async () => {
  const d = new Date()
  const startTime = new Date(d.getTime() - 365 * 24 * 60 * 60 * 1000) // 一年之前
  const endTime = d
  const rawData = await getPV(startTime, endTime)
  let pvSum = 0
  const sourceData = []
  for (const item of rawData) {
    pvSum += item.eventData.pv
    sourceData.push({
      day: formatDay(item.eventDate),
      pv: item.eventData.pv
    })
  }
  pv.value = pvSum
  lineOption.value = parsePvChartData(sourceData)
})

function parsePvChartData(data: any[]) {
  const xArr = data.map(item => item.day)
  const seriesArr = data.map(item => item.pv)
  return {
    tooltip: {},
    xAxis: {
      type: 'category',
      data: xArr
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'PV',
        type: 'line',
        data: seriesArr
      }
    ]
  }
}
</script>
<style lang="scss" scoped></style>
